<template>
	<view>
		<view class="showdetail-container">
			<view class="showdetail-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="back()"></uni-icons>
				</view>
				<!-- #endif -->

				<view class="showdetail-header-title" v-show="isTtile">
					演出详情
				</view>
				<view class="share-icon">
					<img class="share" src="/static/other-icon/share.png" alt="" />
				</view>

			</view>
			<view class="showdetail-content">
				<view class="show-info-box">
					<view class="show-info-box-left">
						<img class="show-info-img" :src="testshowDetail.imageUrl" alt="" />
					</view>
					<view class="show-info-box-right">
						<view class="top-section">
							<view class="show-info-name">
								{{testshowDetail.title}}
							</view>
						</view>
						<view class="show-type">
							<view class="inner-text">{{testshowDetail.perfType}}</view>
						</view>
						<view class="bottom-section">
							<view class="show-info-price">

								￥<span class="inner-font">
									{{testshowDetail.minPrice}}
								</span>起
							</view>
							<view class="show-info-time">
								{{testshowDetail.perfStartTime}} - {{testshowDetail.perfEndTime}}
							</view>
						</view>
					</view>
				</view>
				<view class="addr-info-box">
					<view class="addr-info-box-left">
						<view class="venues-name">
							{{testshowDetail.venueName}}
						</view>
						<view class="addr-name">
							{{testshowDetail.address}}
						</view>
					</view>
					<view class="addr-info-box-right">
						<view class="local">
							<uni-icons class="local-icon" type="location-filled" size="25"></uni-icons>
						</view>
					</view>
				</view>
				<view class="another-section">
					<view class="show-detail-box">
						<view class="show-detail-box-title">
							<view class="show-detail-box-text green-bgcolor">演出简介</view>
						</view>
						<view class="show-summary-context" v-html="testshowDetail.description">

						</view>
						<view class="show-detail-box-title">
							<view class="show-detail-box-text yellow-bgcolor">购票须知</view>
						</view>
						<view class="description-item" v-for="(item, index) in descriptionList" :key="index">
							<view class="description-item-text">
								{{item.text}}
							</view>
							<view class="description-item-context">
								{{item.context}}
							</view>
						</view>
					</view>
					<!--   <view class="comment-list-box">
		            	<view class="comment-list-box-title">
		            		<view class="comment-list-box-text red-bgcolor">演出评价</view>
		            	</view>
		            </view>	 -->
				</view>

			</view>
		</view>
		<view class="showdetail-btn-box">
			<view class="collect">
				<uni-icons class="collectd-icon" type="star-filled" color="#ffca3e" size="25" v-show="isCollect"
					@click="toggleCollect()"></uni-icons>
				<uni-icons class="collect-icon" type="star" size="25" v-show="!isCollect"
					@click="toggleCollect()"></uni-icons>
			</view>
			<view class="buy-btn" @click="toTickInfo(testshowDetail.id)">
				立即购买
			</view>
		</view>


	</view>

</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted,
		computed,
		onBeforeMount
	} from 'vue';
	import {
		onPageScroll
	} from '@dcloudio/uni-app';
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	const isTtile = ref(false);
	const threshold = 70; // 滚动到 70px 的高度后显示 header

	const isCollect = ref(false);
	//演出信息
	// const showInfo = ref({
	// 	code: 2000,
	// 	msg: "success",
	// 	data: {
	// 		showName: "舞台剧东野圭吾【虚无的十字架】",
	// 		showType: "舞台剧",
	// 		lowPrice: "990",
	// 		startTime: "2020.10.18",
	// 		endTime: "2020.10.30",
	// 		showImg: "https://cdn7.axureshop.com/demo/1564251/images/%E9%A6%96%E9%A1%B5/u2103.png",
	// 		showSummary: "音乐戏剧剧团Touki Delphine对敢于创新的人敞开怀抱，普通人、甚至初级哲学家和家庭主妇都很支持他们。他们能在敢于尝试的人身上发现新的亮点。" +
	// 			"由于人们的生活习惯，他们还是认为平淡生活最为重要。主要与像Michael Johansson，Marcel Duchamp或David Byrne这样的艺术家合作，他们的灵感都来源于生活。" +
	// 			"\nTouki Delphine由Bo Koek，Rik Elstgeest和John van Oostrum三人组成。自2012年以来，这个音乐兼视觉艺术三人组每年都会创作一个项目，" +
	// 			"并善于将高雅与通俗的艺术折衷结合在同一部影像音乐戏剧作品中。",
	// 		limitNum: 4
	// 	}
	// })

	const descriptionList = ref([]);

	const msgType = ref('success');
	const messageText = ref('这是一条成功提示');
	const toggleCollect = () => {
		isCollect.value = !isCollect.value;
		if (isCollect.value) {
			uni.showToast({
				title: '收藏成功',
				icon: 'none'
			});
			return;
		} else {
			uni.showToast({
				title: '取消收藏',
				icon: 'none'
			});
			return;
		}
	}

	// const getShowDetail=()=>{
	// 	uni.request({
	// 		url: '/st/perfDetail/list',
	// 		method: 'GET',
	// 		success: (res) => {
	// 			if (res.data.code == 200) {
	// 	      carouselList.value = res.data.rows;
	// 			console.log(res.data);
	// 			} else if (res.data.code != 200) {
	// 				console.log(res.data.code, "异常");
	// 			}
	// 		}
	// 	});
	// }

	//计算属性，将 \n 替换为 <br>
	const formattedSummary = computed(() => {
		return showInfo.value.data.showSummary.replace(/\n/g, '<br>');
	});

	const venuesAddr = ref({
		code: 2000,
		msg: "success",
		data: {
			venues: "上海市1862时尚艺术中心",
			addr: "浙江大道1777号"
		}
	})



	// 返回上一页
	const back = () => {
		uni.navigateBack({
			delta: 1
		});
	};

	// 跳转售票信息页
	const toTickInfo = () => {

		
		uni.setStorage({
			key: 'TogetTicket',
			data: testshowDetail.value,
			success: function() {
				console.log('数据存储成功');
				uni.navigateTo({
					url: "/pages/ticketinfo/ticketinfo"
				});
			},
			fail: function(err) {
				console.error('数据存储失败', err);
			}
		});

	};

	const handleScroll = (e) => {
		// 检查当前滚动位置
		const scrollTop = e.detail ? e.detail.scrollTop : window.scrollY;
		isTtile.value = scrollTop > threshold;
	};
	const testshowDetail = ref(null);
	// 在组件挂载时添加滚动事件监听
	onBeforeMount(() => {

		if (process.env.VUE_APP_PLATFORM !== 'mp-weixin') {
			window.addEventListener('scroll', handleScroll);
		}

		uni.getStorage({
			key: 'showDetailStorage',
			success: function(res) {
				console.log('获取的数据:', res.data);
				testshowDetail.value = res.data;
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});

		descriptionList.value = [{
				text: "限购说明",
				context: `每人限购${testshowDetail.value.limitNum}张`
			},
			{
				text: "退换政策",
				context: "由于票据的时效性，所有票品一经售出不退不换。"
			},
			{
				text: "其他说明",
				context: "1.2m以下儿童入场需购全票且签署免责协议。"
			}
		];

	});


	onUnmounted(() => {
		if (process.env.VUE_APP_PLATFORM !== 'mp-weixin') {
			window.removeEventListener('scroll', handleScroll);
		}
	});

	// 微信小程序特有的生命周期钩子
	onPageScroll((e) => {
		handleScroll({
			detail: {
				scrollTop: e.scrollTop
			}
		});
	});
</script>

<style lang="scss" scoped>
	.showdetail-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #f8f8fe;
		color: #333;

		.showdetail-header {
			top: 0px;
			width: 100%;
			height: 50px;
			display: flex;
			position: fixed;
			z-index: 1000;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.showdetail-header-title {
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				z-index: 5;
				height: 50px;
			}

			.back-icon {
				z-index: 10;
				position: absolute;
				left: 10px;
				height: 20px;

			}

			.share-icon {
				z-index: 10;
				position: absolute;
				right: 15px;

				.share {
					width: 20px;
					height: 20px;
				}
			}
		}

		.showdetail-content {
			float: left;
			width: 100%;
			height: auto;
			box-sizing: border-box;
			margin-top: 50px;
			padding-top: 20px;
			padding-bottom: 80px;
			background: #f8f8fe;

			.show-info-box {
				float: left;
				width: 100%;
				height: 154px;
				box-sizing: border-box;
				padding: 0px 15px;
				margin-bottom: 30px;

				.show-info-box-left {
					float: left;

					.show-info-img {
						width: 120px;
						height: 154px;
					}
				}

				.show-info-box-right {
					float: left;
					width: calc(100% - 120px);
					height: 154px;
					box-sizing: border-box;
					padding-left: 25px;
					display: flex;
					flex-direction: column;
					justify-content: space-between; // 子元素之间等间距分布
					align-items: flex-start; // 子元素水平左对齐

					.top-section {
						display: flex;
						flex-direction: column;
						justify-content: center;
						/* 垂直居中 */
						align-items: flex-start;

						/* 水平左对齐 */
						.show-info-name {
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							overflow: hidden;
							width: auto;
							min-height: 30px;
							max-height: 60px;
							text-overflow: ellipsis;
							font-size: 18px;
							line-height: 30px;
						}
					}


					.show-type {
						font-size: 12px;
						color: #999;

						.inner-text {
							display: block;
						}
					}

					.bottom-section {
						display: flex;
						flex-direction: column;
						align-items: flex-start;

						/* 水平左对齐 */
						.show-info-price {
							font-size: 12px;
							color: #ff2d2de2;
							font-weight: bold;
							line-height: 30px;

							.inner-font {
								font-size: 20px !important;
							}
						}

						.show-info-time {
							font-size: 12px;
							color: #999;
							line-height: 20px;
						}
					}

				}
			}

			.addr-info-box {
				width: 100%;
				height: 60px;
				box-sizing: border-box;
				padding: 0px 15px;

				.addr-info-box-left {
					width: calc(100% - 30px);
					height: 60px;
					float: left;

					.venues-name {
						width: 100%;
						height: 30px;
						line-height: 30px;
						float: left;
						font-size: 16px;
						color: #333;
						text-overflow: ellipsis;
					}

					.addr-name {
						width: 100%;
						height: 30px;
						line-height: 30px;
						float: left;
						font-size: 12px;
						color: #999;
						text-overflow: ellipsis;
					}
				}

				.addr-info-box-right {
					width: 30px;
					height: 60px;
					float: right;

					.local {
						width: auto;
						height: 60px;
						float: right;

						.local-icon {
							line-height: 60px;
						}
					}
				}

			}

			.another-section {
				width: 100%;
				height: auto;
				background: #fff;
				float: left;
				box-sizing: border-box;
				margin-top: 30px;
				box-shadow: 0px 0px 4px 0px #d3d3d3;
				border-top-right-radius: 32px;
				border-top-left-radius: 32px;
				box-sizing: border-box;
				padding: 0px 15px;

				.show-detail-box {
					.show-detail-box-title {
						width: 100%;
						float: left;
						margin-bottom: 20px;

						.show-detail-box-text {
							margin-top: 30px;
							width: auto;
							font-size: 18px;
							line-height: 40px;
							float: left;
							height: 40px;
						}
					}

					.green-bgcolor {
						background: linear-gradient(to bottom, transparent 50%, #d4f6ea 50%);
					}

					.yellow-bgcolor {
						background: linear-gradient(to bottom, transparent 50%, #ffc71c33 50%);
					}



					.show-summary-context {
						width: 100%;
						float: left;
						color: #999;
						font-size: 14px;
						line-height: 24px;

							img {
								width: 100% !important;
							}
						
					}

					.description-item {
						width: 100%;
						height: 60px;
						float: left;
						font-size: 14px;
						line-height: 24px;
						margin-bottom: 24px;

						.description-item-text {
							color: #333;
						}

						.description-item-context {
							color: #999;
						}
					}
				}

				.comment-list-box {
					.comment-list-box-title {
						width: 100%;
						float: left;
						margin-bottom: 20px;

						.comment-list-box-text {
							margin-top: 30px;
							width: auto;
							font-size: 18px;
							line-height: 40px;
							float: left;
							height: 40px;
						}

						.red-bgcolor {
							background: linear-gradient(to bottom, transparent 50%, #ff626219 50%);
						}

					}
				}
			}


		}

	}

	.showdetail-btn-box {
		box-shadow: 0px 0px 4px 0px #d3d3d3;
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;

		.collect {
			float: left;
			width: 40px;
			height: 40px;
			line-height: 40px;
			box-sizing: border-box;

			.collectd-icon {
				float: left;
				text-align: center;
			}

			.collect-icon {
				float: left;
			}
		}

		.buy-btn {
			width: calc(100% - 40px);
			height: 40px;
			float: left;
			font-size: 14px;
			background: #ff2d2de2;
			color: #fff;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>